經過昨天的進度，我們可以知道想要將子層的 data 往父層傳遞可以透過 call by function 的方式，在子層使用 function 將 data 作為參數帶出去，父層使用 function 接收 data 並 return 就可以獲得資料。

現在我們就可以在按下送出按鍵的時候，得到 input 的值，那麼我們可以在點下送出的時候，將資料塞進 TodoList 這個 array 裡面就可以將新的資料 render 到畫面上啦。

回到 code 的部分。

const todoList = [
  "做點什麼1",
  "做點什麼2",
  "做點什麼3",
  "做點什麼4",
  "做點什麼7",
  "做點什麼8",
  "做點什麼9",
];

我們現在可以看到 TodoList 是一個單純的 array，這顯然不是實務上會使用到的方式。
所以我們可以通過建立一個 mockData 來存放他，這個資料。

|- src
|-- data
|--- mock
|---- todoList.json

這時候我們先將資料修改一下

[
  { "id": 1, "title": "做點什麼1", "desc": "這是todo1的detail" },
  { "id": 2, "title": "做點什麼2", "desc": "這是todo2的detail" },
  { "id": 3, "title": "做點什麼3", "desc": "這是todo3的detail" },
  { "id": 4, "title": "做點什麼4", "desc": "這是todo4的detail" },
  { "id": 5, "title": "做點什麼7", "desc": "這是todo7的detail" },
  { "id": 6, "title": "做點什麼8", "desc": "這是todo8的detail" },
  { "id": 7, "title": "做點什麼9", "desc": "這是todo9的detail" }
]

既然這邊的資料改了，那麼我們在HomeListPage這個元件中的參數也需要做修正。

/**
 * @param {string} title
 * @param {Array.<string>} todoList
 * @param {boolean} isMove
 * */
const HomeListPage = ({ title, todoList, isMove, children })

可以看到現在的 todoList 是一個 string 元素的 array，我們把 {Array.<string>} 改成{Array.<object>} ，這時候我們可以知道我們需要的資料是 todoList 中的 title，這邊就把{todo}改成{todo.title}就可以了，接下來我們回到父層把傳進 component 的資料做個修正就可以了。

現在我們繼續把資料丟進 array，首先可以通過 useEffect，在一進來這個頁面的時候獲得 mockData。